<!-- 购物车页面模板结构 -->
<template>
  <div class="cart-page">
    <h1>购物车</h1>
    <div v-if="cartItems.length > 0">
      <div v-for="item in cartItems" :key="item.id" class="cart-item">
        <img :src="item.image" :alt="item.model" />
        <h3>{{ item.model }}</h3>
        <p>价格: ¥{{ item.price }}</p>
        <button @click="removeFromCart(item.id)">移除</button>
      </div>
      <div class="cart-total">
        <p>总价: ¥{{ totalPrice }}</p>
        <button @click="checkout">结算</button>
      </div>
    </div>
    <div v-else>
      <p>购物车是空的</p>
      <RouterLink to="/">返回首页</RouterLink>
    </div>
  </div>
</template>

<!-- 购物车逻辑 - 定义购物车相关状态和方法 -->
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const cartItems = ref([])
const router = useRouter()

const totalPrice = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.price, 0)
})

const removeFromCart = (id) => {
  cartItems.value = cartItems.value.filter(item => item.id !== id)
}

const checkout = () => {
  // 结算逻辑
  router.push('/checkout')
}
</script>

<!-- 购物车页面样式 -->
<style scoped>
.cart-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
}
.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.cart-total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>